<template>
  <div class="stylist-personal-wallet-container">
    <div class="settle-record">
      <div class="top-info">
        <div class="con flex">
          <div class="basic-info">
            <div>
              <img style="border-radius: 50%; width: 40px; height: 40px" :src="avatar" alt="" />
            </div>
            <div>{{ userInfo.userName }}</div>
            <div class="common-text">设计师</div>
            <div class="common-text">账户ID:66666666</div>
          </div>
          <div class="account-balance">
            <div class="account-balance-con">
              <a-space>
                <div> 账户余额: </div>
                <div class="icon">
                  <icon-eye v-if="!isShow" @click="isShow = !isShow" />
                  <icon-eye-invisible v-else @click="isShow = !isShow" />
                </div>
              </a-space>
              <div style="font-size: 20px; min-width: 110px">
                <span v-if="!isShow">￥66666</span>
                <span v-else>***</span>
              </div>
              <a-button size="mini" type="primary" @click="showWithdrawDepositModal = true">申请提现</a-button>
            </div>
          </div>
          <div class="sub-info">
            <div class="money-item-con">
              <div style="font-size: 20px">￥888</div>
              <div class="common-text">累计收入</div>
            </div>
            <div class="money-item-con">
              <div style="font-size: 20px">￥888</div>
              <div class="common-text">提现中</div>
            </div>
            <div class="money-item-con">
              <div style="font-size: 20px">￥888</div>
              <div class="common-text">已提现</div>
            </div>
          </div>
          <div class="img">
            <img src="https://cdn2.selleroa.com/yfni/test/1712905375555df9dfe.png" alt="" />
          </div>
        </div>
      </div>
      <div class="table-container table-gl-w">
        <div class="search-w">
          <FilterTable :filterItem="filterItem" :max-num="5" :isReset="true" @search="searchByVal" />
        </div>
        <div class="table-gl-con">
          <TableWrap style="flex: 1" @refresh="getList">
            <template #tableBody>
              <a-table size="mini" :bordered="{ headerCell: true, wrapper: true }" class="table-two-line" @sorter-change="sortChange" :data="tableList" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
                <template #columns>
                  <a-table-column title="序号" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
                  <a-table-column title="收入/支出" #cell="{ rowIndex }" :width="80">{{ rowIndex + 1 }}</a-table-column>
                  <a-table-column title="时间" #cell="{ rowIndex }" :sortable="sortable" data-index="allAmount" :width="130">{{ rowIndex + 1 }}</a-table-column>
                  <a-table-column title="金额(RMB)" #cell="{ rowIndex }" :width="80">{{ rowIndex + 1 }}</a-table-column>
                  <a-table-column title="账户余额(之前)" #cell="{ rowIndex }" :width="80">{{ rowIndex + 1 }}</a-table-column>
                  <a-table-column title="账户余额(之后)" #cell="{ rowIndex }" :width="80">{{ rowIndex + 1 }}</a-table-column>
                  <a-table-column title="项目" #cell="{ rowIndex }" :width="80">{{ rowIndex + 1 }}</a-table-column>
                  <a-table-column title="任务类型" #cell="{ rowIndex }" :width="80">{{ rowIndex + 1 }}</a-table-column>
                  <a-table-column title="关联单据" #cell="{ rowIndex }" :width="80">{{ rowIndex + 1 }}</a-table-column>
                </template>
              </a-table>
            </template>
          </TableWrap>
          <div class="pagination-footer">
            <a-pagination size="mini" :total="pageNationAccount.total" :default-page-size="pageNationAccount.pageSize" :current="pageNationAccount.pageNum" style="float: right" @change="changeAccountPage" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <withdrawDeposit v-if="showWithdrawDepositModal" v-model="showWithdrawDepositModal" />
</template>

<script lang="ts" setup>
  import { defineComponent, ref } from 'vue'
  import { TableSortable } from '@arco-design/web-vue'
  import useUserStore from '@/store/modules/user'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import withdrawDeposit from './withdrawDeposit.vue'
  const userInfo = useUserStore()
  const avatar = userInfo.avatar || ''
  const sortable: TableSortable = { sortDirections: ['ascend', 'descend'], sorter: true }
  const pageNationAccount = ref({ total: 200, pageNum: 1, pageSize: 20 })
  const filterItem: any = ref([
    {
      type: 'select',
      key: '1',
      keyWidth: '100',
      value: ref(),
      placeholder: '转账类型',
      optionItems: [
        { label: '收入', value: '1' },
        { label: '支出', value: '2' },
      ],
      width: 160,
    },

    {
      key: 'price',
      label: '提现金额',
      value: ref([]),
      type: 'num_range',
      width: '80',
      optionField: {
        //最小值和最大值的转换
        min: 'priceMin',
        max: 'priceMax',
      },
    },

    {
      key: 'taskType',
      label: '任务类型',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [
        { label: '新品套图', value: 'NEW_PRODUCT_PICTURE' },
        { label: '以图修图', value: 'FIX_PICTURE' },
        { label: '拍摄视频', value: 'SHOOT_VIDEO' },
        { label: '海报设计', value: 'POSTER_SHOP_DESIGN' },
        { label: '换钻调色', value: 'CHANGE_DIAMOND_COLOR' },
        { label: '手绘设计', value: 'HAND_DRAWN_DESIGN' },
      ],
    },

    {
      key: 'taskType',
      label: '项目',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [
        { label: '充值', value: '1' },
        { label: '转账', value: '2' },
        { label: '提现', value: '3' },
        { label: '提现驳回', value: '4' },
        { label: '发布任务', value: '5' },
        { label: '撤回任务', value: '6' },
        { label: '终止任务', value: '7' },
        { label: '任务佣金', value: '8' },
        { label: '任务服务费', value: '9' },
      ],
    },

    {
      type: 'keyword_date_range_custom',
      key: 'gmtCreeate',
      keyItems: [{ label: '创建时间', value: 'gmtCreeate' }],
      keyWidth: '110',
      label: '采购下单时间',
      value: ref(),
      width: 200,
    },
  ])

  const isShow = ref(false)
  const loading = ref(false)
  const showWithdrawDepositModal = ref(false)
  const tableList = ref([])
  const searchValue = ref<any>({})

  const searchByVal = (val: any) => {}

  const sortChange = (item: any, extra: any) => {
    if (extra) {
      searchValue.value.sortField = item
      searchValue.value.sortAsc = extra == 'ascend' ? true : false
    } else {
      searchValue.value.sortField = ''
      searchValue.value.sortAsc = ''
    }
    getList()
  }
</script>

<style lang="less" scoped>
  .stylist-personal-wallet-container {
    height: calc(100vh - @menuHeight);
    width: 100%;
    display: flex;
    flex-direction: column;
    .settle-record {
      flex: 1;
      display: flex;
      flex-direction: column;
      // margin-left: 10px;
      // background-color: white;

      .top-info {
        height: 131px;
        border-bottom: 1px solid #e5e6e7;
        background-color: white;
        .con {
          width: 800px;
          height: 120px;
          margin: 10px 0 0 30px;
          background-color: #f8fcff;
          border-left: 1px solid #e5e6e7;
          border-top: 1px solid #e5e6e7;
          border-right: 1px solid #e5e6e7;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          padding: 10px 20px;
          box-sizing: border-box;
          .basic-info {
            text-align: center;
            border-right: 1px solid #e5e6e7;
            padding-right: 30px;
          }

          .account-balance {
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 30px;
            border-right: 1px solid #e5e6e7;
            .icon {
              font-size: 20px;
            }
          }

          .sub-info {
            display: flex;
            align-items: center;
            padding: 0 30px;
            .money-item-con {
              margin-right: 30px;
            }
          }

          .img {
            img {
              height: 100px;
            }
          }
        }
      }
      .table-container {
        flex: 1;
      }
    }
  }
</style>
